<md-sidenav-layout class="demo-root" fullscreen>
  <md-sidenav #start>
    <md-nav-list>
      <a md-list-item [routerLink]="['button']">Button</a>
      <a md-list-item [routerLink]="['button-toggle']">Button Toggle</a>
      <a md-list-item [routerLink]="['card']">Card</a>
      <a md-list-item [routerLink]="['checkbox']">Checkbox</a>
      <a md-list-item [routerLink]="['gestures']">Gestures</a>
      <a md-list-item [routerLink]="['grid-list']">Grid List</a>
      <a md-list-item [routerLink]="['icon']">Icon</a>
      <a md-list-item [routerLink]="['input']">Input</a>
      <a md-list-item [routerLink]="['list']">List</a>
      <a md-list-item [routerLink]="['live-announcer']">Live Announcer</a>
      <a md-list-item [routerLink]="['overlay']">Overlay</a>
      <a md-list-item [routerLink]="['portal']">Portal</a>
      <a md-list-item [routerLink]="['progress-circle']">Progress Circle</a>
      <a md-list-item [routerLink]="['progress-bar']">Progress Bar</a>
      <a md-list-item [routerLink]="['radio']">Radio</a>
      <a md-list-item [routerLink]="['sidenav']">Sidenav</a>
      <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
      <a md-list-item [routerLink]="['toolbar']">Toolbar</a>
      <a md-list-item [routerLink]="['tabs']">Tabs</a>
      <hr>
      <a md-list-item [routerLink]="['baseline']">Baseline</a>
    </md-nav-list>
    <button md-button (click)="start.close()">CLOSE</button>
  </md-sidenav>
  <div>
    <md-toolbar color="primary">
      <button md-icon-button (click)="start.open()">
        <md-icon class="md-24" >menu</md-icon>
      </button>
      <div class="demo-toolbar">
        <h1>Angular Material 2 Demos</h1>
        <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
          {{root.dir.toUpperCase()}}
        </button>
      </div>
    </md-toolbar>

    <div #root="$implicit" dir="ltr" class="demo-content">
      <router-outlet></router-outlet>
    </div>
  </div>
</md-sidenav-layout>
